<template>
  <div ref="tGoods">
    <div class="goods-list">
      <div
        v-for="good in goodsList"
        :key="good.id"
        class="goods"
      >
        <el-card
          style="border-radius: 10px; padding: 10px"
          :body-style="{ padding: ' 5px' }"
        >
          <el-carousel
            v-if="showGoodsPhoto"
            height="150px"
            direction="vertical"
          >
            <el-carousel-item
              v-for="goodsImg in good.imgList"
              :key="goodsImg.url"
            >
              <el-image
                class="goods-img"
                :src="goodsImg.url"
              >
                <template #error>
                  <div class="goods-image-slot">
                    <el-icon>
                      <ele-Picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </el-carousel-item>
          </el-carousel>
          <div class="pl5">
            {{ good.goodsName }}
          </div>
          <div class="goods-desc">
            {{ good.description }}
          </div>
          <div
            :style="{ visibility: showInventory ? 'hidden' : 'visible' }"
            class="goods-desc mt100"
          >
            {{ $t("formgen.goodsConfig.inventory") }}:
            <span class="inventory">{{ good.remainInventory !== undefined ? good.remainInventory : good.inventory }}</span>
          </div>
          <el-row
            type="flex"
            justify="center"
            align="middle"
          >
            <el-col :span="9">
              <div class="price">
                <span class="currency">￥</span>
                <span class="value">
                  {{ getPrice(good) }}
                </span>
              </div>
            </el-col>
            <el-col :span="15">
              <el-input-number
                v-model="good.count"
                :max="good.remainInventory ? good.remainInventory : 100"
                :min="0"
                class="goods-count"
                size="small"
                @input="handleChangeGoodsNum(good)"
              />
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div
      class="total-price-wrap"
      v-if="showTotalPrice"
    >
      <span class="total-text">{{ $t("formgen.goodsConfig.totalPrice") }}:</span>
      <span class="total-num">
        ¥
        <span class="num">
          {{ totalPrice }}
        </span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts" name="TGoods">
import { computed, onMounted, PropType, useAttrs } from "vue";
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { getRequest } from "@/api/baseRequest";
import { useRoute } from "vue-router";
import { Good } from "./types";

const props = defineProps({
  ...formItemProps,
  goodsList: {
    type: Array as PropType<Good[]>,
    default: () => {
      return [];
    }
  },
  showInventory: {
    type: Boolean,
    default: true
  },
  showGoodsPhoto: {
    type: Boolean,
    default: false
  },
  showTotalPrice: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(formEmits);

const formItemHook = useFormItem(props, emits);

const { changeValue } = formItemHook;

onMounted(() => {
  if (props.goodsList && "design" !== props.mode) {
    // 填充默认值
    console.log("props.value", changeValue.value);
    if (props.value && Object.keys(props.value).length) {
      props.goodsList.forEach((good: any) => {
        good.count = undefined !== changeValue.value[good.id] ? changeValue.value[good.id] : 1;
      });
    }
  }
});

const route = useRoute();
const attrs = useAttrs();

const queryGoodsSellQuantity = () => {
  getRequest("/form/ext/queryGoodsSellQuantity", {
    formKey: route.params.key,
    formItemId: attrs.vModel
  }).then(res => {
    let data = res.data;
    props.goodsList.forEach((goods: any, index) => {
      let remainInventory = goods?.inventory;
      if (data[goods?.id]) {
        remainInventory = goods.inventory - data[goods.id];
      }
      goods.remainInventory = remainInventory;
      props.goodsList[index] = goods;
    });
  });
};

const getPrice = (goods: any) => {
  return (goods.count * goods.price).toFixed(2);
};

const handleChangeGoodsNum = (goods: any) => {
  goods["finalPrice"] = goods.count * goods.price;
  changeValue.value[goods.id] = goods.count;
};

onMounted(() => {
  // 非表达设计情况下
  if ("design" !== attrs.mode) {
    queryGoodsSellQuantity();
  }
});

const totalPrice = computed(() => {
  if (!changeValue.value) {
    return 0;
  }
  let total = 0;
  Object.keys(changeValue.value).forEach(key => {
    total += changeValue.value[key] * (props.goodsList.find(good => good.id == Number(key))?.price || 0);
  });
  return total;
});
</script>

<style>
.goods-list {
  display: flex;
  flex-wrap: wrap;
}

.edit-form-item .goods {
  width: 35%;
}

.goods {
  width: 35%;
  margin: 5px;
}

.goods-img {
  width: 100%;
  height: 100%;
}

.goods .el-card__body {
  padding: 0;
}

.goods-image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.goods-desc {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #999;
  display: -webkit-box;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin: 0;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
}

.inventory {
  color: #000000;
}

.price {
  color: #e34152;
}

@media screen and (max-width: 500px) {
  .goods {
    width: 100% !important;
  }

  .goods-count {
    margin-right: 20px !important;
  }
}
.total-price-wrap {
  float: right;
  padding-right: 45px;
  display: flex;

  .total-text {
    color: #323233;
    text-align: right;
    font-size: 14px;
  }

  .total-num {
    color: #e34152;
    font-size: 12px;
    .num {
      font-size: 20px;
    }
  }
}
</style>
